<template>

	<view :style="{backgroundColor: '#fff',height: '100vh',
	  background:`url(${backgroundUrl}) no-repeat center`,backgroundSize: 'cover'}">
		<!-- style="background-color: #fff;height: 100vh;
	   background: url(https://www.mnbtdm.com/upload/images/2022/7/4c3b282b1768459f.jpg) no-repeat center;
	    background-size: cover;" -->
		<!-- <js-lang title="login.title" :showBtn="true"></js-lang> -->
		<!-- <view class="logo"><image src="https://www.mnbtdm.com/upload/images/2022/7/e8e13bc74ffeee36.jpg"></image></view> -->
		<u-mask :show="true">
			<view class="wrap">
				<view class="list">
					<view class="list-call">
						<u-icon class="u-icon" size="40" color="#fff" name="account"></u-icon>
						<input class="u-input" type="text" v-model="username" maxlength="32"
							:placeholder="$t('login.placeholderAccount')" />
						<!-- <u-checkbox v-model="remember" active-color="#69cbff">{{$t('login.autoLogin')}}</u-checkbox> -->
					</view>
					<view class="list-call">
						<u-icon class="u-icon" size="40" color="#fff" name="lock"></u-icon>
						<input class="u-input" type="text" v-model="password" maxlength="32"
							:placeholder="$t('login.placeholderPassword')" :password="!showPassword" />
						<image class="u-icon-right"
							:src="'/static/jeesite/login/eye_' + (showPassword ? 'open1' : 'close1') + '.png'"
							@click="showPass()"></image>
					</view>
				</view>
				<view class="button" hover-class="button-hover" @click="submit()">
					<text>{{$t('login.loginButton')}}</text>
				</view>
				<view class="footer">
					<navigator url="forget" open-type="navigate">{{$t('login.forget')}}</navigator>

					<!-- <button type="primary" size="default" class="login-btn" open-type='getUserInfo' @click="getUserInfo"  >
					    微信一键登录
					</button> 
					<button class="but1" open-type='getUserInfo' @tap="getUserInfo">点击获取用户信息</button> -->
					<!-- <text>|</text>
					<navigator url="reg" open-type="navigate">{{$t('login.reg')}}</navigator> -->
				</view>
				<!-- <view class="oauth2">
					<u-icon style="background-color: #fff;border-radius: 50%;" class="u-icon" size="120" color="#00d969" name="weixin-circle-fill" @click="wxLogin"></u-icon>
					<u-icon class="u-icon" size="120" color="#4fa1e8" name="qq-circle-fill" @click="qqLogin"></u-icon>
				</view> -->
			</view>
			<u-popup v-model="show" mode="bottom" height="260px" :mask-close-able='false'>
				<view style="width: 100%;height: 260px;padding: 10px 50px;background-color: #eee;font-size: 12px;">
					<view class="">授权申请</view>
					<view style="margin: 10px 0;">获取你的昵称、头像</view>
					<view
						style="border-top:1px solid #bcbcbc;border-bottom:1px solid #bcbcbc;padding: 10px 0;display: flex;margin-bottom: 10px;">
						<!-- <view style="width: 50px;height: 50px; margin-right: 10px;">
							<open-data type="userAvatarUrl"></open-data>
						</view>
						<view class="">
							<open-data type="userNickName"></open-data>
							<view style="color: #aaa;">
								微信个人信息
							</view>
						</view> -->
						<view style="width: 70px;height: 60px; margin-right: 10px;">
							<button style="width: 70px;height: 60px;" open-type="chooseAvatar"
								@chooseavatar="onChooseAvatar">
								<image style="height: 50px;margin: 5px 0;" :src="avatarUrl"></image>
							</button>
						</view>
						<input v-model="nickname1" @change="getNickname" type="nickname" class="weui-input"
							placeholder="请输入昵称" />
					</view>
					<view style="display: flex;justify-content: center;">
						<view @click="reject"
							style="width: 80px;height: 30px;line-height:30px;text-align: center;margin-right: 20px;background-color: #fff;color: #00aa00;">
							拒绝</view>
						<view v-if="nickname1 && avatarUrl" @click="allow"
							style="width: 80px;height: 30px;line-height:30px;text-align: center;background-color: #00aa00;color: #fff;">
							允许</view>
						<view v-else
							style="width: 80px;height: 30px;line-height:30px;text-align: center;background-color: #aaa;color: #eee;">
							允许</view>
					</view>
				</view>


			</u-popup>

		</u-mask>

	</view>
</template>
<script>
	/**
	 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
	 */
	import base64 from '@/common/base64.js';
	export default {
		data() {
			return {
				messageArr:[],
				logincode:'',
				nickname1: '',
				avatarUrl: '',
				show: false,
				backgroundUrl: '',
				// username: 'system',
				// password: 'win2003..',
				// username: '0001',
				// password: '123456',
				username: '',
				password: '',
				showPassword: false,
				remember: true,
				isValidCodeLogin: false,
				validCode: '',
				imgValidCodeSrc: null,
				baseUrl: '',
				baseUrlList: [{
					name: 'https://demo.jeesite.com',
					value: 'https://demo.jeesite.com/js'
				}, {
					name: 'http://192.168.0.11:8980',
					value: 'http://192.168.0.11:8980/js'
				}, {
					name: 'http://127.0.0.1:8980',
					value: 'http://127.0.0.1:8980/js'
				}]
			};
		},
		onLoad() {
			//取出缓存中的账号、密码
			const HBusername = uni.getStorageSync('HBusername');
			const HBpassword = uni.getStorageSync('HBpassword');
			console.log("缓存的账号:", HBusername)
			console.log("缓存的密码:", HBpassword)
			if (HBusername && HBpassword) {
				this.username = HBusername;
				this.password = HBpassword;
			}

			this.$u.api.index({
				loginCheck: true
			}).then(res => {
				if (typeof res === 'object' && res.result !== 'login' && res.result !== 'false') {
					uni.reLaunch({
						url: '/pages/btdm/index/index/home'
					});
				}
			});
			const config = this.vuex_config
			this.$u.api.shop.form()
				.then(res => {
					console.log(res, '11111111');
					this.backgroundUrl = config.baseUrl + res.shopAppsetLogin.curl
					console.log(this.backgroundUrl, '2222222222');
				});
				
				this.$u.api.shop.getTempleteIda().then(res => {
				console.log(res,'11223344');
					this.messageArr= res
				})
		},
		methods: {
			getNickname(e) {
				this.nickname1 = e.detail.value
				console.log(e, 'getNickname===');
			},
			onChooseAvatar(e) {
				console.log(e, '===');
				this.avatarUrl = e.detail.avatarUrl
			},
			showPass() {
				this.showPassword = !this.showPassword;
			},
			refreshImgValidCode(e) {
				if (this.vuex_token == '') {
					this.$u.api.index().then(res => {
						this.imgValidCodeSrc = this.vuex_config.baseUrl + '/validCode?__sid=' +
							res.sessionid + '&t=' + new Date().getTime();
					});
				} else {
					this.imgValidCodeSrc = this.vuex_config.baseUrl + '/validCode?__sid=' +
						this.vuex_token + '&t=' + new Date().getTime();
				}
				this.validCode = '';
			},
			reject() {
				this.show = false;
				this.$u.api.logout().then(res => {});
			},
			async allow() {
				// this.$u.api.shop.bindWxOpenid({
				// 	wxOpenid:uni.getStorageSync('loaclOpenId'),
				// 	userCode:this.vuex_user.userCode,
				// }).then(res => {
				// 		this.$u.vuex('vuex_user',{...this.vuex_user,wxOpenid:res.user.wxOpenid});
				// 		uni.setStorageSync('wxavatarUrl', this.avatarUrl)
				// 		setTimeout(() => {
				// 			uni.reLaunch({
				// 				url: '/pages/btdm/index/index/home'
				// 			});
				// 		}, 500);

				// 	});
				
				let _this = this;
						this.$u.api.shop.getOpenId({
							code: _this.logincode,
							userCode: _this.vuex_user.userCode,
						}).then(res => {
							if (res.result == "true") {
								_this.$u.vuex('vuex_user', {
									..._this.vuex_user,
									wxOpenid: res.data
								});
								uni.setStorageSync('wxavatarUrl', _this.avatarUrl)
								// setTimeout(() => {
								// 	uni.setStorageSync('HBusername', this.username);
								// 	uni.setStorageSync('HBpassword', this.password);
								// 	uni.reLaunch({
								// 		url: '/pages/btdm/index/index/home'
								// 	});
								// }, 500);
								uni.setStorageSync('HBusername', this.username);
								uni.setStorageSync('HBpassword', this.password);
								uni.reLaunch({
									url: '/pages/btdm/index/index/home'
								});
								// this.subscribe()
							} else {
								_this.$u.toast(res.message);
							}

						});

					
			},
			async submit() {
				let _that = this
				if (this.username.length == 0) {
					this.$u.toast('请输入账号');
					return;
				}
				if (this.password.length == 0) {
					this.$u.toast('请输入密码');
					return;
				}
				this.$u.api.login({
						username: base64.btoa(this.username),
						password: base64.btoa(this.password),
						validCode: base64.btoa(this.validCode),
						param_currentCusCode: this.vuex_basCus.code ? this.vuex_basCus.code : '',
						param_currentCusName: this.vuex_basCus.name ? this.vuex_basCus.name : '',
						param_deviceType: 'mobileApp',
						param_remember: this.remember
					})
					.then(async res => {
						if (res.result == 'true') {
							// this.$store.commit("modifyBasCus",{code:res.currentCusCode,name:res.currentCusName})
							this.$u.vuex('vuex_basCus', {
								code: res.currentCusCode,
								name: res.currentCusName
							});
								uni.setStorageSync('HBusername', this.username);
								uni.setStorageSync('HBpassword', this.password);
								uni.reLaunch({
									url: '/pages/btdm/index/index/home'
								});
							// if (!res.user.wxOpenid) {
							// 	// await this.login()
							// 	uni.login({
							// 		provider: 'weixin',
							// 		success: function(loginRes) {
							// 			_that.logincode = loginRes.code
							// 		}
							// 	});
							// 	this.show = true
								
							// } else {
								
							// 	uni.setStorageSync('HBusername', this.username);
							// 	uni.setStorageSync('HBpassword', this.password);
							// 	uni.reLaunch({
							// 		url: '/pages/btdm/index/index/home'
							// 	});
							// 	// this.subscribe()
							// 	// setTimeout(() => {
							// 		// uni.reLaunch({
							// 		// 	url: '/pages/btdm/index/index/home'
							// 		// });
							// 	// }, 500);
							// }
						} else {
							this.$u.toast(res.message || '未连接服务器');
						}
						if (res.isValidCodeLogin) {
							this.isValidCodeLogin = true;
							this.refreshImgValidCode();
						}
					});
			},
			subscribe() { // 订阅信息
				// if (!uni.getStorageSync('accept')) {
				// 	uni.requestSubscribeMessage({
				// 		tmplIds: this.messageArr,
				// 		success(res) {
				// 			console.log(res);
				// 			if (res['-nSW356fWDZEtmpL9gyweVXT5imwVcPXWpKvXV66DdM'] == "accept") { // 用户点击确定后
				// 				console.log('1111');
				// 				uni.setStorageSync('accept', true);
				// 			}
				// 		}
				// 	})
				// }
				uni.requestSubscribeMessage({
					tmplIds: this.messageArr,
					success(res) {
						console.log(res);
						// if (res['-nSW356fWDZEtmpL9gyweVXT5imwVcPXWpKvXV66DdM'] == "accept") { // 用户点击确定后
						// 	console.log('1111');
						// 	uni.setStorageSync('accept', true);
						// }
					}
				})
			
			},
			
			getUserInfo() {
				console.log(1111);
				uni.login({
					provider: 'weixin', // 使用微信授权  
					success: res => {
						// 获取到 access_token 和 openid  
						console.log(res);
						// const { access_token, openid } = res.result;  
						// 使用 access_token 和 openid 调用 uni.getUserProfile() 方法获取用户信息  
						uni.getUserProfile({
							desc: '获取你的昵称、头像、地区及性别',
							success: userInfo => {
								console.log(userInfo);
								// 处理用户信息  
							},
							fail: error => {
								console.log(error);
							}
						});
					},
					fail: error => {
						console.log(error);
					}
				});
			},
			
			wxLogin(res) {
				this.$u.toast('微信登录');
			},
			qqLogin() {
				this.$u.toast('QQ 登录');
			},
			updateBaseUrl() {
				this.vuex_config.baseUrl = this.baseUrl;
				this.$u.vuex('vuex_config', this.vuex_config);
				this.$u.http.setConfig({
					baseUrl: this.baseUrl
				});
				this.$u.toast('切换成功！');
			}
		}
	};
</script>
<style lang="scss">
	@import 'index.scss';

	.logo {
		width: 100%;
		height: 260rpx;
		// background: rgba(59, 121, 235, 1);
		// box-shadow: 0rpx 5rpx 20rpx 5rpx rgba(45, 127, 235, 0.5);
		// border-radius: 50%;
		// margin: 70rpx auto 10rpx auto;
	}

	.logo image {
		width: 100%;
		height: 260rpx;
	}

	.base-url js-select {
		width: 100%;
	}

	.button {
		margin: 30rpx auto 0;
	}

	.footer {
		// display: flex;
		// flex-direction: row;
		// justify-content: center;
		// align-items: center;
		// text-align: center;
		padding-left: 30px;
		color: #46afff;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 35rpx;
		margin-top: 60rpx;
	}

	.footer text {
		font-size: 30rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.oauth2 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		// margin: 55rpx 100rpx;
		margin-top: 10px;

		image {
			height: 100rpx;
			width: 100rpx;
		}
	}
</style>